<!--购物车列表-->
<template>

    <div class="container">
      <el-form :inline="true"  >
        <el-form-item>
          <el-input  v-model="dataForm.paramKey1" placeholder="书名" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input  v-model="dataForm.paramKey2" placeholder="作者名" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
        <el-col>订单结算：{{this.totalPrice}}</el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">结算</el-button>
        </el-form-item>
      </el-form>


      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="bookCode"
          header-align="center"
          align="center"
          width="80"
          label="图书编码">
        </el-table-column>
        <el-table-column
          prop="img"
          header-align="center"
          align="center"
          width="120"
          label="展示图片">
          <template slot-scope="scope">
            <img width="80px" height="80px" :src="scope.img"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="bookName"
          header-align="center"
          align="center"
          width="80"
          label="书名">
        </el-table-column>
        <el-table-column
          prop="publisher"
          header-align="center"
          align="center"
          label="出版社">
        </el-table-column>

        <el-table-column
          prop="author"
          header-align="center"
          align="center"
          width="80"
          label="作者">
        </el-table-column>
        <el-table-column
          prop="price"
          header-align="center"
          align="center"
          label="价格">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <a >查看详情 </a><a style="color: red">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
</template>

<script>
export default {
  data() {
    return {
      dataListLoading: false,
      dataList: [
        {
          bookCode:'1',
          bookName:'书名',
          img:'#',
          author:'无名',
          publisher: '无名书社',
          price:'100.00'+'元',

        }
      ],
      totalPrice:0,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        paramKey1: '',
        paramKey2: '',
      },
    };
  },
  methods: {
    getDataList () {}

  }
}

</script>
